Compositon APIの検討
全部1つのメソッドの中に入るためぐちゃぐちゃにならないか心配
好きなようにカテゴライズはできるが、カテゴライズは人によるから統一感がなくなりそう。
形式的にprops, data, computed, methodsと分かれていた方が安心感がある。
でもpropsは結局別プロパティでセットするから実質data, computed, methodsだけ?
$routerなどのグローバルインジェクション系のアクセス方法
全てに対してuse~と言うメソッドを用意する感じ?
code:typescript
// i18nPlugin.js
import { ref, provide, inject } from "@vue/composition-api";
const createI18n = config => ({
locale: ref(config.locale),
messages: config.messages,
$t(key) {
}
});
const i18nSymbol = Symbol();
export function provideI18n(i18nConfig) {
const i18n = createI18n(i18nConfig);
provide(i18nSymbol, i18n);
}
export function useI18n() {
const i18n = inject(i18nSymbol);
if (!i18n) throw new Error("No i18n provided!!!");
return i18n;
}
でもこの書き方はおそらくグローバルのi18nに対しての話で、ローカルのi18nの設定できなくなった気がする。
使えないと思ったけど、context.root.$~でアクセスできるっぽい。
code:typescript
import { createComponent } from '@vue/composition-api'
export default createComponent({
setup(props, context) {
const router = context.root.$router
function move() {
router.push({ name: 'about' })
}
return { move }
}
})
Nuxtなどの固有のメソッド型をどう設定する?
asyncDataのメソッドがComposition APIでは使えないらしい。
同様にbeforeRouteEnterとかも気になる。
IE対応(Vue 3.0)
2系で@vue/composition-apiを使っている時は問題ないが、3系だとIEが非対応になるので、IE対応の案件は注意が必要。